import './index.css'
import React from 'react'
import { v4 as uuid } from 'uuid'
import Jerry from './images/Jerry.png'

// 时间格式化
function formatDate (time) {
  return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
}

class App extends React.Component {
  state = {
    list: [],
    comment: ''
  }

  // 受控组件回调
  textareaChange = (e) => {
    this.setState({
      comment: e.target.value
    })
  }

  // 发表回调
  submitComment = () => {
    if (this.state.comment != '') {
      const arrList = [...this.state.list]
      arrList.push({
        id: uuid(),  // 独一无二的值
        author: '段奇乐',
        comment: this.state.comment,
        time: new Date()
      })

      this.setState({
        list: arrList,
        comment: ''
      })
    } else {
      alert('评论内容不能为空！')
    }
    this.setState({
      comment: ''
    })
  }

  // 删除回调
  delComments = (id) => {
    const arrList = [...this.state.list]
    const index = arrList.indexOf(arrList.find(item => item.id === id))
    if (index !== -1) {
      arrList.splice(index, 1)
    }
    this.setState({
      list: arrList
    })
  }

  // 回车事件
  handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      event.preventDefault()
      this.submitComment()
    }
  }

  render () {
    return (
      <div className='App'>
        {/* 评论以及评论数 */}
        <div className="comment-head">
          <span>评论</span>
          <span className='comment-number'>{this.state.list.length}</span>
        </div>
        {/* 排序 */}
        <div className="tabs-order" />
        <div className='comment-send'>
          <div className="user-face">
            <a href="https://space.bilibili.com/513008816?spm_id_from=333.999.0.0" target='_blank'>
              <img className="user-head" src={Jerry} alt="" />
            </a>
          </div>
          <div className="textarea-container">
            <textarea
              cols="80"
              rows="5"
              className="ipt-txt"
              placeholder='发条评论吧( ゜- ゜)つロ'  // 未输入前输入框的提示信息
              value={this.state.comment}
              onChange={this.textareaChange}
              onKeyDown={this.handleKeyDown}
            />
            <button onClick={this.submitComment} className='comment-submit' >发布</button>
          </div>
        </div>
        <div>
          <span className='comment-head'>精彩评论</span>
        </div>
        <div>
          {
            this.state.list.map(item => (
              <div className="list-item" key={item.id}>
                <div className="user-face-se">
                  <a href="https://space.bilibili.com/513008816?spm_id_from=333.999.0.0" target='_blank'>
                    <img className="user-head" src={Jerry} alt="" />
                  </a>
                </div>
                <div className="comment">
                  <div className="user">{item.author}</div>
                  {/* <p className="text">{item.comment}</p> */}
                  <ul>
                    <li>{item.comment}</li>
                  </ul>
                  <div className="info">
                    <span className="time">{formatDate(item.time)}</span>
                    <span className="btn-hover" onClick={() => this.delComments(item.id)}>删除</span>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}

export default App

